<template>
  <div id="uplode">
    <el-upload
     v-loading="loading"
      action="#"
      list-type="picture-card"
      :auto-upload="false"
      accept="image/*"
     
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>

          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download"></i>
          </span>

          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>


  <button @click="uplode">1231231</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      loading: false
    };
  },
   mounted() {
    $("input").change(function () {
      // console.log($("input")[0].files);
      // // $("input")[0].files.forEach( (index,item) => {
      // //   console.log(index,item);
      // // });
      // var formData = new FormData(); //这里需要实例化一个FormData来进行文件上传
      // formData.append("FileList", $("input")[0].files);
      // formData.append("data", "123123");
      // for (var value of formData.getAll("FileList")) {
      //   console.log(value);
      // }
      // for (var value of formData.values()) {
      //   console.log(value);
      // }
    });
  },
  methods: {
    uplode(){
      var formData = new FormData(); //这里需要实例化一个FormData来进行文件上传
      $("input")[0].files.forEach((item,index)=> {
        formData.append("Files",item);
      });
      console.log(formData.getAll('Files'))
       console.log($("input")[0].files[0]);
      this.$http({
              method:"post",
              url:"/upload",
              data:{
               Files:formData
              }
              })
                
    },
    handleRemove(file) {
      console.log(this.dialogImageUr);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
 
};
</script>